<template>
  <div class="page">
    <Icon class='fh' type="md-arrow-back" @click="back"/>

    <video v-if="!isMobile && $route.query.video" :src='$route.query.video' controls='controls' width='100%'
    ></video>
    <video-player v-if="$route.query.video && isMobile" class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions">
    </video-player>
    <img class="pdf" :src="img" alt="">
  </div>
</template>
<script>
export default {
  data(){
    return {
      isMobile:false,
      img:'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/xinjiang/one.png',
      playerOptions : {
        playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay : false, //如果true,浏览器准备好时开始回放。
        muted : false, // 默认情况下将会消除任何音频。
        loop : false, // 视频一结束就重新开始。
        preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language : 'zh-CN',
        aspectRatio : '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid : true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources : [ {
            type : "video/mp4",
            src : ''//url地址
        } ],
        poster:'',
        // width: document.documentElement.clientWidth,
        notSupportedMessage : '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar : {
            timeDivider : true,//当前时间和持续时间的分隔符
            durationDisplay : true,//显示持续时间
          remainingTimeDisplay : false,//是否显示剩余时间功能
          fullscreenToggle : true  //全屏按钮
        }
      }
    }
  },
  created(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      this.isMobile = true//可以换成http地址
    }
    this.img='http://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/xinjiang/'+this.$route.query.type+'.png'
    this.playerOptions.sources[0].src=this.$route.query.video
  },
  methods:{
    back(){
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.page{
  width: 100%;
}
.pdf{
  width: 100%;
}
.fh{
  position:fixed;
  top: 10px;
  left: 10px;
  padding:10px;
  display: inline-block;
  cursor: pointer;
  font-size:40px;
  background:rgba(0,0,0,0.3);
  border-radius:50%;
  color:#fff;
  z-index:10000;
}
</style>